<template>
	<view class="container bg-fff">
		<view class="qrcode flex-column-center">
			<image :src="agentQrcode" mode="widthFix" @click.stop="showmask=true"></image>
		</view>
		<view class="maskshow" v-show="showmask" @click.stop="showmask=false">
			<image class="userqrcode" :src="userQrcode" mode="widthFix" @longtap.stop="showtap"></image>
		</view>
		<b-u-button-theme class="btn-bom" width="600rpx" height="92rpx" @click.stop="handleQrcode">保存二维码</b-u-button-theme>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					referee_id: '',
				},
				agentInfo: {},
				agentQrcode: "",
				userQrcode:"",
				showmask:false,
			}
		},
		onLoad() {
			this.getHttp();
		},
		methods: {
			handleQrcode(ctype=0) {
				const that = this;
				let saveQrcode = that.agentQrcode
				if(ctype==1){
					saveQrcode = this.userQrcode
				}
				uni.getImageInfo({
					src: saveQrcode,
					success: (image) => {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function () {
								uni.showToast({
									title: "已保存到相册"
								})
							},
							fail: function (err) {
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
									//当初用户拒绝，再次发起授权
									that.openSetting();
								}
							}
						});
					}
				});
			},
			getAgentQrcode() {
				uni.$u.api.getAgentQrcode({source: 'wx'}).then(res => {
					this.agentQrcode = res.qrcode;
					this.userQrcode = res.user_qrcode;
				})
			},
			getHttp() {
				this.getAgentQrcode();
			},
			openSetting(){
				const that = this;
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum'] == true) {
							uni.showModal({
								title: '提示',
								content: '获取权限成功，再次点击按钮即可保存',
								showCancel:false
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								cancelText: '暂时不开',
								confirmText: '现在开启',
								confirmColor: '#BB0024',
								success: res => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												let authSettings = res.authSetting
												if (authSettings['scope.writePhotosAlbum'] == true) {
													uni.showModal({
														title: '提示',
														content: '获取权限成功，再次点击按钮即可保存',
														showCancel:false
													});
												} else {
													console.log('用户未开启');
													that.showerrormsg();
												}
											}
										})
									} else { 
										that.showerrormsg();
									}
								},
							})
						}
					}
				})
			},
			showerrormsg(){
				uni.showToast({
					title: '获取权限失败，将无法保存到相册',
					icon: 'none'
				})
			},
			showtap(){
				const that = this;
				uni.showActionSheet({
					itemList: ['保存推广二维码'],
					success: (res) => {
						// console.log('选择了第' + (res.tapIndex + 1) + '个选项');
						if(res.tapIndex==0){
							that.handleQrcode(1)
						}
					},
					fail: (err) => {
						console.log('弹窗取消');
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
		
		.item {
			margin-bottom: 24rpx;
			
			.item-label {
				font-size: 28rpx;
				color: #333333;
				
				text { 
					color: red;
				}
			}
			
			.item-value {
				
				input {
					width: 438rpx;
					background: #F6F6F6;
					padding: 24rpx;
					border-radius: 16rpx;
				}
			}
		}
		
		.qrcode {
			
			image {
				width: 100vw;
				// margin-bottom: 30rpx;
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.09);
			}
		}
		
		.maskshow{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.7);
			z-index: 2;
		}
		.userqrcode{
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 70%;
			z-index: 3;
			border-radius: 20rpx;
		}
		
		.btn-bom{
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
</style>
